<template>
  <div class="chart-container">
    <h2>Vue + ECharts 示例</h2>
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"

export default {
  name: "ChartPage",
  mounted() {
    // 初始化图表
    const chart = echarts.init(this.$refs.chartRef)
    chart.setOption({
      title: { text: "柱状图示例" },
      tooltip: {},
      xAxis: { data: ["A", "B", "C", "D", "E", "F"] },
      yAxis: {},
      series: [
        {
          name: "数量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    })
  },
}
</script>

<style scoped>
.chart-container {
  text-align: center;
  margin-top: 30px;
}
.chart {
  width: 600px;
  height: 400px;
  margin: auto;
}
</style>
